<script setup>
import { Search } from '@element-plus/icons-vue'
import { findTree } from '@/api/system/menu'
import { queryRoleMenu, saveRoleMenu, updateRoleApi, queryRoleDetail } from '@/api/system/role'
import { ElMessage } from 'element-plus'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  menuList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['update:visible', 'sure', 'update'])

const filterText = ref('')
const treeRef = ref()
const scrollbarRef = ref()
const ruleInfo = ref({})

watch(filterText, (val) => {
  treeRef.value.filter(val)
})

const filterNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}

const treeData = ref([])

const handleSave = () => {
  submitBtnLoading.value = true
  treeRef.value.getCheckedKeys()
  const param = {
    ...ruleInfo.value,
    _id: props.id,
    // menuIds: treeRef.value.getCheckedKeys()
    menuIdList: [...treeRef.value.getCheckedKeys(), ...treeRef.value.getHalfCheckedKeys()]
  }
  updateRoleApi(param)
    .then(() => {
      ElMessage.success('修改成功')
      treeRef.value.setCheckedKeys([])
    })
    .finally(() => {
      emit('update:visible')
      emit('update')
    })
}
const resetForm = () => {
  emit('update:visible')
  filterText.value = ''
  treeRef.value.setCheckedKeys([])
}
const handleCheckChange = (data, checked, indeterminate) => {}

const queryTreeData = async () => {
  const { data } = await findTree()
  treeData.value = data
}

const queryTreeChecked = async () => {
  // const { data } = await queryRoleMenu({ roleId: props.id })
  props.menuList.forEach((val) => {
    nextTick(() => {
      treeRef.value.setChecked(val, true, false)
    })
  })
}
const submitBtnLoading = ref(false)
const editLoading = ref(false)
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      submitBtnLoading.value = false
      editLoading.value = true
      await queryTreeData()
      await queryTreeChecked()
      queryRoleDetail(props.id).then((res) => {
        ruleInfo.value = res.data
      })
      editLoading.value = false
      scrollbarRef.value.setScrollTop(0)
    }
  }
)
</script>

<template>
  <el-dialog
    :close-on-click-modal="false"
    align-center
    v-model="visible"
    title="菜单权限"
    @close="resetForm"
    width="60%"
  >
    <el-form v-loading="editLoading" label-width="80px">
      <el-form-item label="菜单权限">
        <el-input v-model="filterText" :prefix-icon="Search" placeholder="搜索" clearable />
      </el-form-item>
      <el-form-item>
        <el-scrollbar ref="scrollbarRef" height="50vh">
          <el-tree
            ref="treeRef"
            class="filter-tree mt-2 tree-width"
            :data="treeData"
            node-key="_id"
            :props="{ label: 'name' }"
            default-expand-all
            :filter-node-method="filterNode"
            show-checkbox
            check-on-click-node
            :expand-on-click-node="false"
            @check-change="handleCheckChange"
          />
        </el-scrollbar>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="submitBtnLoading">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-tree) {
  width: 100%;
}

:deep .el-form-item__content .el-scrollbar {
  flex: 1;
}
</style>
